<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="" value="abc">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="username" value="admin">
    <input type="text" name="" id="userpass" value="123">

    <script>
        let a = Array.from(document.getElementsByTagName("input"));
        console.log(a[0].value);
        //数组  array
        console.log(Array.from(document.getElementsByTagName("input")));
        //dom collection htmlcollection
        console.log(document.getElementsByTagName("input"));

        //创建一个定长的list
        // List<Integer> list = Arrays.asList(1,2,3,4);

        let arr1 = Array.of(1,2,3);
        arr1.push(34);
        arr1.pop();
        console.log(arr1);

        //我们可以数组配搭

        let arr2 =  Array.of(1,2,3,4,5,6,8,-3);

        /**
         * 回调函数 
         */
        
        //  function jisuan(x,y,z){
        //     if(z === '+'){
        //         return x + y;
        //     }
        //  }

        //lambda 表达式,把一个函数接口做为方法的形式参数进行传递， 实参为当前接口的实现类，()->{}
        //我们把一个function 类型做为形参传递给方法
        /**
         * @param fn 回调函数 function (){}  ()=>{}
         */ 
        function jisuan(x,y,fn){
            return fn(x,y);
        }

        //lambda表达式 [回调函数]
        console.log(jisuan(2,3,(x,y)=>{return x+y}));
        console.log(jisuan(2,3,(x,y)=> x-y));
        console.log(jisuan(2,3,(x,y)=>{
            x += 13;
            y -= 2;
            return x + y;
        }));

        /**
         * find ((x,y,z))
         * x 代表数组里面每一个元素
         * y 代表数组里面每一个元素对应的下标
         * z 为数组本身
         */ 
        let arr3 =  Array.of(1,2,3,4,5,6,8,-3);
        let at = arr3.find((a,b,c)=>{
            console.log(a,b,c);
            return a == 16;
        })
        console.log(at);

        let arr5 =  Array.of(23,34,5,7);

        let person = {name:"kjx",age:7}
        
        console.log(arr3.find(function (x){
            return x > this[2];
        },arr5));

        // ()=>{this指的是全局的 globalThis 而不是这个方法本身}
        console.log(arr3.find(function (x){
            //这个对了 回调方法
            return x > this.age;
        },person)); 


        //数组 flat 方法拉平

        let arr6 = [1,2,[3,4,5],6,[7,8,[9,10]]];
        console.log(arr6);

        let arr7 = arr6.flat(Number.MAX_VALUE);
        console.log(arr7,Number.MAX_VALUE,arr7.at(-1));

        /**
         * 就是为了声明当前这个方法参数的类型
         */
       function abc(x = 0,y=0){
        return x - y;
       }

        
       console.log(abc(2,3));

       let x = 23;
       let y = 67;

       let point = {x,y};

       let point1 = {
        x1:x,
        y1:y
       }

       console.log(point,point1);
       let username = document.getElementById("username").value;
       let password = document.getElementById("userpass").value;
       const data = {username,password};
       console.log(data);

       //对vue的学习
       const kjx = {
        getusername : function (){
            return 456;
        }
       }

       const kjx1 = {
        //vue2 
        getusername(){
            return 123;
        }
       }
       console.log(kjx.getusername(),kjx1.getusername());
    </script>
</body>
</html>